<template>
  <div>
    <el-dialog :title="formtype==1?'新增供应商档案':'编辑供应商档案'" class="el_dialog_pro" width='897px' :visible.sync="dialogFormVisible">
      <!-- <div class="dialog_body"> -->
        <el-form :model="form" label-position='left'>
        <el-row>
          <el-col :span="8" class="el_col ">
            <el-form-item label="编号" :label-width="formLabelWidth">
              <el-input class="input_border_bottom" v-model="form.name" placeholder="请输入编号" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="el_col pad_left">
            <el-form-item label="等级" :label-width="formLabelWidth">
              <el-select class="select_border_bottom" v-model="form.region" placeholder="请选择等级">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="el_col pad_left">
            <el-form-item label="所属分组" :label-width="formLabelWidth">
              <el-select class="select_border_bottom" v-model="form.region" placeholder="请选择所属分组">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16" class="el_col ">
            <el-form-item label="全称" :label-width="formLabelWidth">
              <el-input class="input_border_bottom" v-model="form.name" placeholder="请输入全称" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="el_col pad_left">
            <el-form-item label="简称" :label-width="formLabelWidth">
              <el-input class="input_border_bottom" v-model="form.name" placeholder="请输入简称" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16" class="el_col ">
            <el-form-item label="地区" :label-width="formLabelWidth">
              <!-- <v-distpicker 
                :province="form.province.value" 
                :city="form.city.value" 
                :area="form.area.value"
                @selected="onSelected">
            </v-distpicker> -->
            </el-form-item>
          </el-col>
          <el-col :span="8" class="el_col pad_left">
            <el-form-item label="地址" :label-width="formLabelWidth">
              <el-input class="input_border_bottom" v-model="form.name" placeholder="请输入简称" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="el_col ">
            <el-form-item label="联系人" :label-width="formLabelWidth">
              <el-input class="input_border_bottom" v-model="form.name" placeholder="请输入编号" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="el_col pad_left">
            <el-form-item label="联系电话" :label-width="formLabelWidth">
              <el-input class="input_border_bottom" v-model="form.name" placeholder="请输入联系电话" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="el_col pad_left">
            <el-form-item label="传真号码" :label-width="formLabelWidth">
             <el-input class="input_border_bottom" v-model="form.name" placeholder="请输入传真号码" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="el_col">
            <el-form-item label="开户银行" :label-width="formLabelWidth">
              <el-input class="input_border_bottom" v-model="form.name" placeholder="请输入开户银行" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="el_col pad_left">
            <el-form-item label="开户账号" :label-width="formLabelWidth">
              <el-input class="input_border_bottom" v-model="form.name" placeholder="请输入开户账号" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="el_col pad_left">
            <el-form-item label="企业税号" :label-width="formLabelWidth">
              <el-input class="input_border_bottom" v-model="form.name" placeholder="请输入企业税号" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="el_col ">
            <el-form-item label="描述" :label-width="formLabelWidth">
              <el-input class="textarea_border_bottom" v-model="form.name" type="textarea" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
        <div class="el_tabs_pro">
          <el-button type="primary" @click="add" class="add_btn" size="small">新增</el-button>
            <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
              <el-tab-pane label="联系方式" name="first">
                <div class="contact_list">
                  <table-cmp
                    style="width:100%"
                    class="table_cmp"
                      :loading="loading"
                      :table-data="tableData"
                      Height='166'
                      :table-label="tableLabel"
                      @handleButton="handleButton"
                      @rowClick="rowClick"
                      @cellClick="cellClick"
                      @handleSortChange="handleSortChange"
                      @handleSelectionChange="handleSelectionChange"
                    ></table-cmp>
                </div>
              </el-tab-pane>
              <el-tab-pane label="扩展信息" name="second">
                <div class="contact_list">
                    <table-cmp
                    style="width:100%"
                    class="table_cmp"
                      :loading="loading"
                      :table-data="infor_tableData"
                      Height='166'
                      :table-label="infor_tableLabel"
                      @handleButton="handleButton"
                      @rowClick="rowClick"
                      @cellClick="cellClick"
                      @handleSortChange="handleSortChange"
                      @handleSelectionChange="handleSelectionChange"
                    ></table-cmp>
                </div>
              </el-tab-pane>
              <el-tab-pane label="产品库" name="third">
                <div class="contact_list">
                    <table-cmp
                    style="width:100%"
                    class="table_cmp"
                      :loading="loading"
                      :table-data="product_tableData"
                      Height='166'
                      :table-label="product_tableLabel"
                      @handleButton="handleButton"
                      @rowClick="rowClick"
                      @cellClick="cellClick"
                      @handleSortChange="handleSortChange"
                      @handleSelectionChange="handleSelectionChange"
                    ></table-cmp>
                </div>
              </el-tab-pane>
            </el-tabs>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="commit">确 定</el-button>
        </div>
      <!-- </div> -->
</el-dialog>
<contactpop ref="contactpop"></contactpop>
<inforpop ref="inforpop"></inforpop>
<product ref="product"></product>
  </div>
</template>

<script>
var occupancyDisplay = {
  template: `<div>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
  
  </div>`,
  props: ['row'],
  created() {
    },
  methods: {
    shenhDetail(row) {
      this.$emit('shenh-detail', row);
      // console.log(this.row,'1111111');
      
    },
    seeDetail(row) {
      this.$emit('see-detail', row);
      // console.log(this.row,'1111111');
      
    }
  }
};
var infor_occupancyDisplay = {
  template: `<div>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
  
  </div>`,
  props: ['row'],
  created() {
    },
  methods: {
    shenhDetail(row) {
      this.$emit('shenh-detail', row);
      // console.log(this.row,'1111111');
      
    },
    seeDetail(row) {
      this.$emit('see-detail', row);
      // console.log(this.row,'1111111');
      
    }
  }
};
var product_occupancyDisplay = {
  template: `<div>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
  
  </div>`,
  props: ['row'],
  created() {
    },
  methods: {
    shenhDetail(row) {
      this.$emit('shenh-detail', row);
      // console.log(this.row,'1111111');
      
    },
    seeDetail(row) {
      this.$emit('see-detail', row);
      // console.log(this.row,'1111111');
      
    }
  }
};
var that;
import VDistpicker from 'v-distpicker'
import contactpop from './contactpop'
import inforpop from './inforpop'
import product from './product'
  export default {
    data() {
      return {
        dialogFormVisible:false,
        loading:false,
        formtype:1,
        tbasindex:0,
        tableData: [{
          Status:'111',
          Name:'111',
          Source:'111',
          Remark:'111',
        },{
          Status:'111',
          Name:'111',
          Source:'111',
          Remark:'111',
        },{
          Status:'111',
          Name:'111',
          Source:'111',
          Remark:'111',
        },{
          Status:'111',
          Name:'111',
          Source:'111',
          Remark:'111',
        },{
          Status:'111',
          Name:'111',
          Source:'111',
          Remark:'111',
        }],
       listfrom:{
        "Status":'',
        "KeyWord":'',
        "Status":'',
        "PageSize":10,
        "PageIndex":1
      },
      tableLabel: [
        { label: '职务', param: 'Status', width: '100', align: 'center', sortable: false},
        { label: '姓名', param: 'Name', align: 'center',width: '200', sortable: false },
        { label: '联系电话', param: 'Source', align: 'center', width: '150' },
        { label: '负责事项', param: 'Remark', align: 'center'},
        { label: '操作', align: 'center', width: '300',
           component:occupancyDisplay,listeners:{
             'dyapi-detail'(row) {
              that.dyapiDetail(row);
            },
            'delete-detail'(row) {
              that.deleteDetail(row);
            }
          }
      }
      ],
      infor_tableData:[],
      infor_tableLabel: [
        { label: '属性名', param: 'Status', width: '100', align: 'center', sortable: false},
        { label: '属性值', param: 'Name', align: 'center',width: '200', sortable: false },
        { label: '备注', param: 'Source', align: 'center',},
        { label: '操作', align: 'center', width: '300',
           component:infor_occupancyDisplay,listeners:{
            'dyapi-detail'(row) {
              that.dyapiDetail(row);
            },
            'delete-detail'(row) {
              that.deleteDetail(row);
            }
          }
      }
      ],
      product_tableData:[],
      product_tableLabel: [
        { label: '编码', param: 'Status', width: '100', align: 'center', sortable: false},
        { label: '名称', param: 'Name', align: 'center', sortable: false },
        { label: '操作', align: 'center', width: '300',
           component:infor_occupancyDisplay,listeners:{
            'dyapi-detail'(row) {
              that.dyapiDetail(row);
            },
            'delete-detail'(row) {
              that.deleteDetail(row);
            }
          }
      }
      ],
        activeName2:'first',
        formLabelWidth:'80px',
        form:{
          name:'',
          region:'',
          province:{
            code: "460000",
            value: "海南省"
          },
          city:{
            code: "460000",
            value: "海南省"
          },
          area:{
            code: "460000",
            value: "海南省"
          },
        }
      }
    },
    components:{
      VDistpicker,
      contactpop,
      product,
      inforpop,
    },
    created() {
      that = this;
      // console.log(citys);
    },
    methods: {
      commit(){
        this.dialogFormVisible=false
      },
      onSelected(data){
        // this.dialogFormVisible=false
        console.log(data);
      },
      handleClick(data){
        // this.dialogFormVisible=false
        // console.log(data.index);
        this.tbasindex = data.index;
      },
      add(){
        if (this.tbasindex == 0) {
          this.$refs.contactpop.dialogFormVisible = true;
        } else if(this.tbasindex == 1) {
          this.$refs.inforpop.dialogFormVisible = true;
          
          
        } else {
          this.$refs.product.dialogFormVisible = true;
          

        }
      },
      handleButton(){},
      rowClick(){},
      cellClick(){},
      handleSortChange(){},
      handleSelectionChange(){},
    },
  }
</script>

<style lang="less" scoped>
.dialog_body{
  width: 100%;

}
.pad_left{
  padding-left: 15px;
}
.el_tabs_pro{
  margin-top: 10px;
  width: 100%;
  position: relative;
}
.add_btn{
  position: absolute;
  top: 5px;
  right: 0px;
  z-index: 12;
}
.contact_list{
  width: 100%;
  height: 165px;
}
</style>